<template>
  <div>
    <div class="my-form-container" style="width: 100% !important; height: 100%; margin: 0;">
      <el-form :model="formData">
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">
              <span>学&emsp;&emsp;期</span>
            </div>
            <label>{{ formData.xueqiname }}</label>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">
              <span>课程编号</span>
            </div>
            <label>{{ formData.course.courseCode }}</label>
          </el-form-item>
        </div>
        <div style="display: flex;">
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">
              <span>课程名称</span>
            </div>
            <label>{{ formData.course.courseName + formData.simpleName }}</label>
          </el-form-item>
          <el-form-item class="my-form-item">
            <div class="my-form-item-label">
              <span>学&emsp;&emsp;时</span>
            </div>
            <label>{{ formData.course.totalHours }}</label>
          </el-form-item>
        </div>
      </el-form>
      <div style="margin: 15px 0 55px 5px;">
        <div class="button-style" @click="handleAddRow">
          <span>添加行</span>
        </div>
      </div>
      <el-table
        border
        :data="tableData"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class">
        <el-table-column label="星期" width="110" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.week" size="mini" placeholder="请选择星期">
              <el-option v-for="(item, index) in weekList" :key="index" :label="item.dictValue" :value="item.dictKey" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="上课节次" width="170" align="center">
          <template slot-scope="scope">
            <el-select v-model="scope.row.startSection" size="mini" placeholder="请选择节次" style="width: 65px;">
              <el-option v-for="(item, index) in sectionList" :key="index" :label="item.dictKey" :value="item.dictKey" />
            </el-select>
            <span>&nbsp;-&nbsp;</span>
            <el-select v-model="scope.row.endSection" size="mini" placeholder="请选择节次" style="width: 65px;">
              <el-option v-for="(item, index) in sectionList" :key="index" :label="item.dictKey" :value="item.dictKey" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="上课场地" width="150" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <div style="display: flex;">
              <el-input v-model="scope.row.placename" size="mini" readonly placeholder="请选择上课场地" />
              <i class="el-icon-edit" style="margin: 6px 0 0 5px; font-size: 20px; color: #67C23A; cursor: pointer;" @click="handleSelectPlace(scope.row)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column label="主讲教员" width="150" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <div style="display: flex;">
              <el-input v-model="scope.row.teachername" size="mini" readonly placeholder="请选择主讲教员" />
              <i class="el-icon-edit" style="margin: 6px 0 0 5px; font-size: 20px; color: #67C23A; cursor: pointer;" @click="handleSelectTeacher(scope.row)" />
            </div>
          </template>
        </el-table-column>
        <el-table-column v-for="(item, index) in weekArray" :key="index" :label="item.label" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checkArray[index].value" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="display: flex; justify-content: center; margin-top: 20px;">
      <div class="button-style" @click="handleSave">
        <span>保&emsp;存</span>
      </div>
      <div class="button-style" style="margin-left: 50px; background: #FFEEEF; border: 1px solid #FA533C;" @click="handleCancel">
        <span style="color: #FA533C;">取&emsp;消</span>
      </div>
    </div>
    <el-dialog title="选择上课场地" :visible.sync="dialogShow1" width="1200px">
      <el-table
        :data="tableData1"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
        @selection-change="handleSelectionRow1">
        <el-table-column type="selection" width="65" align="center" />
        <el-table-column prop="cdmc" label="场地场所名称" align="center" />
        <el-table-column prop="mj" label="面积（平方米）" align="center" />
        <el-table-column prop="krnrs" label="容纳人数" align="center" />
        <el-table-column prop="cdlx" label="场地场所类型" align="center" />
        <el-table-column prop="ssxq" label="所属校区" align="center" />
        <el-table-column prop="ssjzw" label="所属建筑物" align="center" />
        <el-table-column prop="dept" label="管理部门" align="center" />
      </el-table>
      <div style="display: flex; justify-content: center; margin-top: 20px;">
        <div class="button-style" @click="handleSure1">
          <span>确&emsp;定</span>
        </div>
        <div class="button-style" style="margin-left: 50px; background: #FFEEEF; border: 1px solid #FA533C;" @click="handleCancel1">
          <span style="color: #FA533C;">取&emsp;消</span>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="选择主讲教员" :visible.sync="dialogShow2" width="1200px">
      <el-table
        border
        :data="tableData2"
        :height="525"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
        @selection-change="handleSelectionRow2">
        <el-table-column type="selection" width="60" />
        <el-table-column prop="name" label="姓名" align="center" />
        <el-table-column prop="sex" label="性别" width="154" align="center" />
        <el-table-column prop="unit" label="单位" align="center" />
        <el-table-column prop="job" label="职务" align="center" />
      </el-table>
      <div style="display: flex; justify-content: center; margin-top: 20px;">
        <div class="button-style" @click="handleSure2">
          <span>确&emsp;定</span>
        </div>
        <div class="button-style" style="margin-left: 50px; background: #FFEEEF; border: 1px solid #FA533C;" @click="handleCancel2">
          <span style="color: #FA533C;">取&emsp;消</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { queryDictByCode } from '@/api/admin1/check'
import { xxkkkgl_getClassInfo, saveCoursePlans, queryCoursePlanDetail, queryPlaceListByName } from '@/api/trainingManagement/place'
import { reqGetCalendarList } from '@/api/admin1/check'
import { selectDetailsJob } from '@/api/courseAchievement/entryResults'
export default {
  data() {
    return {
      classNo: this.$route.query.classNo,
      formData: {
        course: {}
      },
      tableData: [],
      weekArray: [],
      weekList: [],
      sectionList: [],
      courseList: [],
      tableData1: [],
      tableData2: [],
      dialogShow1: false,
      dialogShow2: false,
      selectRow1: [],
      selectRow2: [],
      rowIndex: 0
    }
  },
  mounted () {
    if (this.classNo === undefined) {
      this.$message.warning('教学班信息丢失！')
    } else {
      queryDictByCode('week').then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.weekList = res.data.data
        }
      })
      queryDictByCode('section').then(res => {
        if (res.data.data && res.data.data.length > 0) {
          this.sectionList = res.data.data
        }
      })
      xxkkkgl_getClassInfo(this.classNo).then(res => {
        if (res.data.code === 200) {
          this.formData = res.data.data
          reqGetCalendarList(this.formData.course.xueqi).then(res => {
            if (res.data.code === 200) {
              this.courseList = res.data.data
              this.courseList.forEach((item, index) => {
                this.weekArray.push({ index: index, prop: 'week' + index, label: '第' + (index + 1) + '周' })
              })
              let data = []
              const params = { teachingClassId: this.classNo }
              queryCoursePlanDetail(params).then(res => {
                if (res.data.code === 200) {
                  data = res.data.data
                  let lineCode = -1
                  let weekArray
                  let checkArray
                  data.forEach(item => {
                    if (lineCode !== item.linecode) {
                      weekArray = {}
                      checkArray = []
                      lineCode = item.linecode
                      this.courseList.forEach((subItem, index) => {
                        checkArray.push({ index: index, value: false })
                      })
                      checkArray[item.weeks - 1].value = true
                      weekArray.checkArray = checkArray
                      weekArray['week'] = item.week
                      weekArray['startSection'] = item.starcourses
                      weekArray['endSection'] = item.endcourses
                      weekArray['index'] = lineCode
                      weekArray['teacherId'] = item.teacherId
                      weekArray['teachername'] = item.teachername
                      weekArray['placeId'] = item.placeId
                      weekArray['placename'] = item.placename
                      this.tableData.push(weekArray)
                    } else {
                      checkArray[item.weeks - 1].value = true
                    }
                  })
                }
              })
            }
          })
        }
      })
    }
  },
  methods: {
    handleAddRow: function () {
      let checkArray = []
      this.courseList.forEach((item, index) => {
        checkArray.push({ index: index, value: false })
      })
      this.tableData.push({
        index: this.tableData.length,
        week: '',
        startSection: '',
        endSection: '',
        area: '',
        speaker: '',
        checkArray: checkArray,
        rowIndex: 0
      })
    },
    handleSave: function () {
      let record
      let data = []
      this.tableData.forEach((item, index) => {
        item.checkArray.forEach(subItem => {
          if (subItem.value) {
            record = this.courseList[subItem.index].weekTimeVoList.find(items => {
              return items.week === this.handleTransWeek(item.week)
            })
            if (record !== undefined) {
              data.push({
                teachingClassId: this.classNo,
                pkdate: record.time,
                linecode: index,
                week: item.week,
                weeks: subItem.index + 1 + '',
                starcourses: item.startSection,
                endcourses: item.endSection,
                teacherId: item.teacherId,
                teachername: item.teachername,
                placeId: '2',
                placename: item.placename,
                xueqiid: this.formData.course.xueqi
              })
            }
          }
        })
      })
      if (data.length > 0) {
        saveCoursePlans(data).then(res => {
          if (res.data.code === 200) {
            this.$message.success('排课信息保存成功！')
          } else {
            this.$message.warning(res.data.data)
          }
        })
      } else {
        this.$message.warning('未选择排课日期或排课日期不合规！')
      }
    },
    handleTransWeek: function (val) {
      let week
      if (val === '1') {
        week = '星期一'
      } else if (val === '2') {
        week = '星期二'
      } else if (val === '3') {
        week = '星期三'
      } else if (val === '4') {
        week = '星期四'
      } else if (val === '5') {
        week = '星期五'
      } else if (val === '6') {
        week = '星期六'
      } else {
        week = '星期日'
      }
      return week
    },
    handleSelectPlace: function (row) {
      this.rowIndex = row.index
      queryPlaceListByName('','','','','','').then((res) => {
        if (res.data.code === 200) {
          this.tableData1 = res.data.data
        }
      })
      this.dialogShow1 = true
    },
    handleSelectTeacher: function (row) {
      this.rowIndex = row.index
      selectDetailsJob({}).then(res=>{
        if(res.data.code === 200){
          this.tableData2 = res.data.data
        }
      })
      this.dialogShow2 = true
    },
    handleSelectionRow1: function (val) {
      this.selectRow1 = val
    },
    handleSelectionRow2: function (val) {
      this.selectRow2 = val
    },
    handleSure1: function () {
      if (this.selectRow1.length === 0) {
        this.$message.warning('请选择上课场地！')
      } else if (this.selectRow1.length > 1) {
        this.$message.warning('只能选择一个上课场地！')
      } else {
        this.tableData[this.rowIndex].placeId = this.selectRow1[0].id
        this.tableData[this.rowIndex].placename = this.selectRow1[0].cdmc
        // 利用星期change事件刷新整个table的data数据（临时）
        const week = this.tableData[this.rowIndex].week
        this.tableData[this.rowIndex].week = -1
        this.tableData[this.rowIndex].week = week
        this.dialogShow1 = false
      }
    },
    handleSure2: function () {
      if (this.selectRow2.length === 0) {
        this.$message.warning('请选择主讲教员！')
      } else if (this.selectRow2.length > 1) {
        this.$message.warning('只能选择一个主讲教员！')
      } else {
        this.tableData[this.rowIndex].teacherId = this.selectRow2[0].id
        this.tableData[this.rowIndex].teachername = this.selectRow2[0].name
        // 利用星期change事件刷新整个table的data数据（临时）
        const week = this.tableData[this.rowIndex].week
        this.tableData[this.rowIndex].week = -1
        this.tableData[this.rowIndex].week = week
        this.dialogShow2 = false
      }
    },
    handleCancel: function () {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.push({
        path: "/admin/elective/startClassManagement"
      })
    },
    handleCancel1: function () {
      this.dialogShow1 = false
    },
    handleCancel2: function () {
      this.dialogShow2 = false
    }
  }
}
</script>

<style lang="less" scoped>
  .button-style {
    float: left;
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    box-sizing: border-box;
    > span {
      font-size: 14px;
      color: #f3b815;
    }
  }
  @fontFamily:"Microsoft YaHei";
  .xpaas-table-class {
    border: 1px solid #004ca7;
    border-radius: 9px;
    ::v-deep div.el-table__header-wrapper {
      table.el-table__header {
        thead {
          tr.xpaas-header-row-class {
            padding: 0;
            height: 60px;
            background-color: #edf2f9;
            font-size: 16px;
            font-family: @fontFamily;
            font-weight: bold;
            line-height: 20px;
            color: #004ca7;
            th.xpaas-header-cell-class {
              font-weight: bold;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
    ::v-deep div.el-table__body-wrapper {
      table.el-table__body {
        tbody {
          tr.xpaas-row-class {
            td.xpaas-header-cell-class {
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              background-color: #edf2f9;
              div.cell {
                font-size: 16px;
                font-weight: bold;
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
            td.xpaas-cell-class {
              height: 60px;
              border-right: 1px solid #c7d7eb;
              border-left: 0;
              border-bottom: 1px solid #c7d7eb;
              div.cell {
                font-family: @fontFamily;
                color: #004ca7;
              }
            }
          }
        }
      }
    }
  }
  .my-form-item {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid rgba(0, 76, 167, 0.39);
    margin-bottom: 0;
    > div {
      display: flex;
      height: 100%;
      &:nth-child(2) {
        .my-form-item-label {
          border-left: 1px solid rgba(0, 76, 167, 0.39);
        }
      }
      .my-form-item-label {
        width: 220px;
        padding-left: 0;
        background: rgba(0, 76, 167, 0.1);
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        color: #004ca7;
        font-size: 16px;
        font-weight: bold;
        border-left: 1px solid rgba(0, 76, 167, 0.39);
      }
      .mustW {
        color: red;
      }
      .el-form-item__content {
        display: flex;
      }
    }
    label {
      width: 100%;
      margin: 10px 30px 0;
      color: #004ca7;
    }
  }
  /deep/ .el-dialog {
    height: 700px;
    overflow: hidden;
  }
</style>
